// Favorites
import { useEffect, useState } from "react";

// Soft UI Dashboard PRO React example components
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
// @mui material components
import Card from "@mui/material/Card";
import Icon from "@mui/material/Icon";
import AppBar from "@mui/material/AppBar";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Switch from "@mui/material/Switch";
import AccessTimeIcon from "@mui/icons-material/AccessTime";
import Tooltip from "@mui/material/Tooltip";

import PropTypes from "prop-types";
// Soft UI Dashboard PRO React components
import SoftBox from "components/SoftBox";
import SoftTypography from "components/SoftTypography";
import SoftButton from "components/SoftButton";
import SoftSelect from "components/SoftSelect";
import SoftAvatar from "components/SoftAvatar";

// Soft UI Dashboard PRO React example components
import DataTable from "examples/Tables/DataTable";
import decor from "assets/images/team-1.jpg";
import Notifications from "./components/notifications";
import HistoryModal from "./components/HistoryModal";
import { projectMyList, projectChoosePeriod } from "request/api";
function Favorites() {
  const [interval, setInterval] = useState(0);
  const [switchType, setSwitchType] = useState(false);
  const [rows, setRows] = useState([]);
  const handleSetInterval = (event, newInterval) => setInterval(newInterval);
  useEffect(() => {
    getProjectMyList();
  }, []);
  // 获取我的自选列表
  const getProjectMyList = async () => {
    let params = {
      page: 1,
      pageSize: 1000,
    };
    let res = await projectMyList(params);
    console.log(res);
    // setRows(res.data);
  };
  // 切换自选周期
  const togglePeriod = async (type, value, id) => {
    // console.log(type, value, id);
    let params = {
      project_id: id,
      status: value == 0 ? "1" : "0",
      tradetime: type,
    };
    await projectChoosePeriod(params);
    getProjectMyList();
  };
  const dataTableData = {
    columns: [
      {
        Header: "Project",
        accessor: "name",
        Cell: ({ row: { original } }) => (
          <SoftBox display="flex" alignItems="center" lineHeight={1}>
            <SoftBox mr={2}>
              {original.image ? (
                <SoftAvatar
                  src={original.image}
                  alt={original.name}
                  size="sm"
                  sx={{ width: "32px", height: "32px" }}
                />
              ) : null}
            </SoftBox>
            <SoftTypography display="block" variant="caption" fontWeight="medium" fontSize="14px">
              {original.name}
            </SoftTypography>
          </SoftBox>
        ),
      },
      {
        Header: "Token",
        accessor: "symbol",
        Cell: ({ value }) => (
          <SoftBox color="text" width="50px">
            {value}
          </SoftBox>
        ),
      },
      {
        Header: "Current Price",
        accessor: "current_price",
        Cell: ({ value }) => (
          <SoftBox color="text" width="80px">
            {value}
          </SoftBox>
        ),
      },
      {
        Header: "Signal Price",
        accessor: "signal.price",
        Cell: ({ value }) => (
          <SoftBox color="text" width="80px">
            {value}
          </SoftBox>
        ),
      },
      {
        Header: "Action",
        accessor: "action",
        Cell: ({ value }) => (
          <SoftBox width="50px">
            {value == 1 ? "做多" : value == 2 ? "平多" : value == 3 ? "做空" : "平空"}
          </SoftBox>
        ),
      },
      {
        Header: "Signal Interval",
        accessor: "signal.tradetime",
        Cell: ({ value }) => (
          <SoftBox width="90px">
            {value == 1 ? "15F" : value == 2 ? "1H" : value == 3 ? "6H" : "12H"}
          </SoftBox>
        ),
      },
      {
        Header: "Signal Time",
        accessor: "signal.operate_time",
      },
      {
        Header: "15M",
        accessor: "signal_15F",
        Cell: ({ value, row: { original } }) => (
          <SoftBox>
            <Switch
              checked={value == 0 ? false : true}
              onChange={() => togglePeriod("1", value, original.project_id)}
            />
          </SoftBox>
        ),
      },
      {
        Header: "1H",
        accessor: "signal_1H",
        Cell: ({ value, row: { original } }) => (
          <SoftBox>
            <Switch
              checked={value == 0 ? false : true}
              onChange={() => togglePeriod("2", value, original.project_id)}
            />
          </SoftBox>
        ),
      },
      {
        Header: "2H",
        accessor: "signal_2H",
        Cell: ({ value, row: { original } }) => (
          <SoftBox>
            <Switch
              checked={value == 0 ? false : true}
              onChange={() => togglePeriod("3", value, original.project_id)}
            />
          </SoftBox>
        ),
      },
      {
        Header: "6H",
        accessor: "signal_6H",
        Cell: ({ value, row: { original } }) => (
          <SoftBox>
            <Switch
              checked={value == 0 ? false : true}
              onChange={() => togglePeriod("4", value, original.project_id)}
            />
          </SoftBox>
        ),
      },
      {
        Header: "12H",
        accessor: "signal_12H",
        Cell: ({ value, row: { original } }) => (
          <SoftBox>
            <Switch
              checked={value == 0 ? false : true}
              onChange={() => togglePeriod("5", value, original.project_id)}
            />
          </SoftBox>
        ),
      },
      {
        Header: "Action",
        accessor: "edit",
        Cell: ({ row: { original } }) => (
          <SoftBox display="flex" alignItems="center" lineHeight={1}>
            <HistoryModal />
            <SoftButton
              variant="gradient"
              color="light"
              fullWidth
              sx={{ textTransform: "capitalize", ml: 2 }}
            >
              Remove
            </SoftButton>
          </SoftBox>
        ),
      },
    ],
    rows,
  };

  return (
    <DashboardLayout>
      <DashboardNavbar />
      <SoftBox my="72px">
        <Card>
          <SoftBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
            <SoftBox lineHeight={1}>
              <SoftTypography variant="h5" fontWeight="medium">
                Favorites
              </SoftTypography>
            </SoftBox>
            <SoftBox display="flex" alignItems="center">
              <SoftTypography variant="span" color="text" fontSize="14px" sx={{ mr: 2 }}>
                Signal Interval
              </SoftTypography>
              <SoftBox width="330px">
                <AppBar position="static">
                  <Tabs
                    // orientation={tabsOrientation}
                    value={interval}
                    onChange={handleSetInterval}
                  >
                    <Tab label="15M" />
                    <Tab label="1H" />
                    <Tab label="2H" />
                    <Tab label="6H" />
                    <Tab label="12H" />
                  </Tabs>
                </AppBar>
              </SoftBox>
            </SoftBox>
          </SoftBox>
          <DataTable table={dataTableData} entriesPerPage={false} />
        </Card>
      </SoftBox>
      <Notifications />
    </DashboardLayout>
  );
}

Favorites.propTypes = {
  value: PropTypes.any, //
  row: PropTypes.any, //
};

export default Favorites;
